<template>
	<xn-form-container
		:title="formData.id ? '编辑房间管理' : '增加房间管理'"
		:width="700"
		v-model:open="open"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="房间位置：" name="buildingId">
						<a-select v-model:value="formData.buildingId" placeholder="请输入房间位置" :options="buildList">
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="房间名称：" name="roomName">
						<a-input v-model:value="formData.roomName" placeholder="请输入房间名称" allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="容纳人数：" name="galleryful">
						<a-input-number  v-model:value="formData.galleryful" placeholder="请输入容纳人数"  style="width: 100%"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="设备类型：" name="equipmentTypeId">
						<a-select
							v-model:value="formData.equipmentTypeId"
							mode = "multiple"
							placeholder="请输入设备类型"
							:options="equipmentTypeList">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="使用审批人：" name="approver">

						<a-select v-model:value="formData.approver"
								  mode = "multiple"
								  placeholder="请输入使用审批人"
								  :options="usserList">
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="责任人：" name="dutyOfficer">
						<a-select v-model:value="formData.dutyOfficer"
								  mode = "multiple"
								  placeholder="请输入责任人"
								  :options="usserList">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="服务人员：" name="serviceStaff">
						<a-select
							v-model:value="formData.serviceStaff"
							mode = "multiple"
							placeholder="请输入服务人员"
							:options="usserList">
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="房间类型：" name="roomType">
						<a-select v-model:value="formData.roomType" placeholder="请输入房间类型" :options="roomTypeList">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item label="是否涉密：" name="isSecret">
				<a-radio-group v-model:value="formData.isSecret" :options="yesOrNo"> </a-radio-group>
			</a-form-item>
			<a-form-item label="使用部门：" name="usedOrg">
				<a-select v-model:value="formData.usedOrg" placeholder="请输入使用部门" :options="orgList">
				</a-select>
			</a-form-item>
			<a-form-item label="管理部门：" name="manageOrg">
				<a-select v-model:value="formData.manageOrg" placeholder="请输入管理部门" :options="orgList">
				</a-select>
			</a-form-item>
			<a-form-item label="房间二维码：" name="rootQr">
				<a-input v-model:value="formData.rootQr" placeholder="请输入房间二维码" allow-clear />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="bizRoomInfoForm">
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import bizRoomInfoApi from '@/api/biz/bizRoomInfoApi'
import tool from "@/utils/tool";
// 抽屉状态
const open = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)

const buildList = ref([]);

const equipmentTypeList = ref([]);

const usserList = ref([]);

const roomTypeList = ref([]);

const orgList = ref([]);

// 传递设计器需要的API
const selectorApiFunction = {
	orgTreeApi: (param) => {
		return processApi.processOrgTreeSelector(param).then((data) => {
			return Promise.resolve(data)
		})
	},
	userPageApi: (param) => {
		return processApi.processUserSelector(param).then((data) => {
			return Promise.resolve(data)
		})
	}
}
// 获取楼宇下拉
bizRoomInfoApi.getBuildListList()
	.then((data) => {
		// 假设 data 是一个包含多个对象的数组，每个对象都有 'dictValue' 和 'name' 属性
		buildList.value = data.map((item) => ({
			value: item['id'],
			label: item['name']
		}));
	})
	.catch((error) => {
		console.error('Failed to fetch buildList types:', error);
	});
//获取设备设施
bizRoomInfoApi.getEquipmentTypeList()
	.then((data) => {
		// 假设 data 是一个包含多个对象的数组，每个对象都有 'dictValue' 和 'name' 属性
		equipmentTypeList.value = data.map((item) => ({
			value: item['id'],
			label: item['name']
		}));
	})
	.catch((error) => {
		console.error('Failed to fetch equipmentTypeList types:', error);
	});

//获取人员相关信息
bizRoomInfoApi.getUserList()
	.then((data) => {
		// 假设 data 是一个包含多个对象的数组，每个对象都有 'dictValue' 和 'name' 属性
		usserList.value = data.map((item) => ({
			value: item['id'],
			label: item['name']
		}));
	})
	.catch((error) => {
		console.error('Failed to fetch getUserList types:', error);
	});
//获取房间类型
bizRoomInfoApi.roomTypeList()
	.then((data) => {
		// 假设 data 是一个包含多个对象的数组，每个对象都有 'dictValue' 和 'name' 属性
		roomTypeList.value = data.map((item) => ({
			value: item['id'],
			label: item['name']
		}));
	})
	.catch((error) => {
		console.error('Failed to fetch roomTypeList types:', error);
	});
//获取组织信息
bizRoomInfoApi.getOrgList()
	.then((data) => {
		// 假设 data 是一个包含多个对象的数组，每个对象都有 'dictValue' 和 'name' 属性
		orgList.value = data.map((item) => ({
			value: item['id'],
			label: item['name']
		}));
	})
	.catch((error) => {
		console.error('Failed to fetch getOrgList types:', error);
	});

// 打开抽屉
const onOpen = (record) => {
	open.value = true
	if (record) {
		let recordData = cloneDeep(record)
		let approverstr = recordData.approver;
		if(null != approverstr){
			// 去除字符串的两端括号
			approverstr = approverstr.slice(1, -1);
			// 使用逗号分割字符串得到数字字符串数组
			let approverstrstrArray = approverstr.split(',');
			// 去除每个元素的前后空格（如果有的话，虽然在这个例子中没有）
			approverstrstrArray = approverstrstrArray.map(numStr => numStr.trim());
			recordData.approver = approverstrstrArray;
		}

		let serviceStaffstr = recordData.serviceStaff;
		if(null != serviceStaffstr){
      // 去除字符串的两端括号
			serviceStaffstr = serviceStaffstr.slice(1, -1);
			// 使用逗号分割字符串得到数字字符串数组
			let serviceStaffstrArray = serviceStaffstr.split(',');
			// 去除每个元素的前后空格（如果有的话，虽然在这个例子中没有）
			serviceStaffstrArray = serviceStaffstrArray.map(numStr => numStr.trim());
			recordData.serviceStaff = serviceStaffstrArray;
		}
		let dutyOfficerstr = recordData.dutyOfficer;
		if(null != dutyOfficerstr){
			// 去除字符串的两端括号
			dutyOfficerstr = dutyOfficerstr.slice(1, -1);
			// 使用逗号分割字符串得到数字字符串数组
			let dutyOfficerstrArray = dutyOfficerstr.split(',');
			// 去除每个元素的前后空格（如果有的话，虽然在这个例子中没有）
			dutyOfficerstrArray = dutyOfficerstrArray.map(numStr => numStr.trim());
			recordData.dutyOfficer = dutyOfficerstrArray;
		}
		let equipmentTypestr = recordData.equipmentTypeId;
		if(null != equipmentTypestr){
			// 去除字符串的两端括号
			equipmentTypestr = equipmentTypestr.slice(1, -1);
			// 使用逗号分割字符串得到数字字符串数组
			let equipmentTypestrArray = equipmentTypestr.split(',');
			// 去除每个元素的前后空格（如果有的话，虽然在这个例子中没有）
			equipmentTypestrArray = equipmentTypestrArray.map(numStr => numStr.trim());
			recordData.equipmentTypeId = equipmentTypestrArray;
		}

		formData.value = Object.assign({}, recordData)
	}
}
// 关闭抽屉
const onClose = () => {
	formRef.value.resetFields()
	formData.value = {}
	open.value = false
}
// 默认要校验的
const formRules = {
	roomName: [required('请输入房间名称')],
	isSecret: [required('请输入是否涉密')],
}
// 验证并提交数据
const onSubmit = () => {
	formRef.value.validate().then(() => {
		submitLoading.value = true
		const formDataParam = cloneDeep(formData.value)
		console.log(formDataParam)
		bizRoomInfoApi
			.bizRoomInfoSubmitForm(formDataParam, formDataParam.id)
			.then(() => {
				onClose()
				emit('successful')
			})
			.finally(() => {
				submitLoading.value = false
			})
	})
}
const yesOrNo = tool.dictList('COMMON_WHETHER')
// 抛出函数
defineExpose({
	onOpen
})
</script>
